<template>
	<div style="background-color: white;padding-top: 20px;">

		<el-form class="cardboxList_box">
			<el-row :gutter="20">
				<el-col :span="20">
					<el-form-item label="定位地点" label-width="120px" required>
						<el-input style="width:100%;" v-model="tableData.dingweididian" type="text"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="20">
					<el-form-item label="公司名称" label-width="120px" required>
						<el-input style="width:100%;" v-model="tableData.gongsimingcheng" type="text"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="20">
					<el-form-item label="联系电话" label-width="120px" required>
						<el-input style="width:100%;" v-model="tableData.lianxidianhua" type="text"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="20">
					<el-form-item label="定位地点" label-width="120px" required>
						<el-input style="width:100%;" v-model="tableData.gongsimingcheng" type="text"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="20">
					<el-form-item label="经度" label-width="120px" required>
						<el-input style="width:100%;" v-model="tableData.jingdu" type="text"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="20">
					<el-form-item label="纬度" label-width="120px" required>
						<el-input style="width:100%;" v-model="tableData.weidu" type="text"></el-input>
					</el-form-item>
				</el-col>


				<el-col :span="20" style="border-bottom: 1px solid #ccc;margin-bottom: 30px;">

					<el-form-item label-width="100px">

						<!-- <el-input style="width: 100%;" v-model="addform.text" type="text"></el-input> -->
						<quill-editor class="ql-editor" ref="myTextEditor" v-model="tableData.fuwenben" :options="editorOption"></quill-editor>
					</el-form-item>
					<el-button style="width: 160px;display: block;margin: auto;margin-bottom: 30px;" type="primary" @click="submitForm_add(item)"
					 size="small">提交</el-button>
				</el-col>

			</el-row>
			<el-dialog :close-on-click-modal="false" width="800px" style="margin-top: 1px" title="视频上传" :visible.sync="videoDialog.show"
			 append-to-body class="avatar-uploader-dialog" ref="dialog">
				<el-tabs v-model="videoDialog.activeName">
					<el-tab-pane label="添加视频链接" name="first">
						<el-input v-model="videoDialog.videoLink" placeholder="请输入视频链接" clearable></el-input>
						<el-button type="primary" size="small" style="margin: 20px 0px 0px 0px" @click="addVideoLink(videoDialog.videoLink)">添加
						</el-button>
					</el-tab-pane>
					<el-tab-pane label="本地视频上传" name="second">
						<!-- :data="{ game: 'ppjt' }" -->
						<el-upload drag :action="uploadImgUrl" accept="video/*" :show-file-list="false" name="image" :on-success="uploadVideoSuccess"
						 :before-upload="beforeUploadVideo" :on-error="uploadVideoError" :multiple="false">
							<i class="el-icon-upload"></i>
							<div class="el-upload__text">点击上传</div>
						</el-upload>
					</el-tab-pane>
				</el-tabs>
			</el-dialog>
		</el-form>
		<!-- 		<div slot="footer" class="dialog-footer">
				
			</div -->





	</div>
</template>

<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import {
		quillEditor,
		Quill
	} from 'vue-quill-editor';
	import {
		container,
		ImageExtend,
		QuillWatch
	} from 'quill-image-extend-module'
	Quill.register('modules/ImageExtend', ImageExtend)
	import Video from '../../utils/video.js'
	Quill.register(Video, true)
	// import {
	// 	quillEditor
	// } from 'vue-quill-editor';
	// 富文本编辑器工具栏配置，因为涉及到富文本编辑器以外的组件调用，所以在这里我们需要重新自定义一下富文本编辑器的工具栏
	const toolbarOptions = [
		['bold', 'italic', 'underline', 'strike'], // toggled buttons
		['blockquote', 'code-block'],

		[{
			header: 1
		}, {
			header: 2
		}], // custom button values
		[{
			list: 'ordered'
		}, {
			list: 'bullet'
		}],
		[{
			script: 'sub'
		}, {
			script: 'super'
		}], // superscript/subscript
		[{
			indent: '-1'
		}, {
			indent: '+1'
		}], // outdent/indent
		[{
			direction: 'rtl'
		}], // text direction

		[{
			size: ['small', false, 'large', 'huge']
		}], // custom dropdown
		[{
			header: [1, 2, 3, 4, 5, 6, false]
		}],

		[{
			color: []
		}, {
			background: []
		}], // dropdown with defaults from theme
		[{
			font: []
		}],
		[{
			align: []
		}],
		['link', 'image', 'video'],
		['clean'] // remove formatting button
	]
	import {
		uploadImg,
		proUrl,
		jianjiepeizhiList,
		jianjiepeizhiEdict,

	} from '../../api/index';
	export default {
		name: 'dashboard',
		data() {
			var self = this;
			return {
				fields: {
					name: 'image'
				},
				videoDialog: {
					show: false,
					activeName: 'first',
					videoLink: ''
				},
				proUrl: proUrl,
				userInfo: '',
				now_mungbean: 0,
				allPrice: 0,
				subFormNum: 0,
				addpriceType: '减',
				userList_1: [],
				readOnly: false,
				defaultData: [],
				screenOptions: '',
				statistical: '', //统计
				uploadImgUrl: proUrl + '/backstage/api/upload_image/',
				fileList: [],
				fileList1: [],
				Look_dataList: [],
				selectionbox: '',
				roleOptions: [],
				defaultProps: {
					children: 'children',
					label: 'label'
				},

				templateVisible: false,
				showViewer: false, // 显示查看器
				ruleForm: '',
				hideUp: '',
				nextProjectForm: {
					publicWelfareUrl: "",
				},
				Texttitle: "新增",
				page: 1,
				page_1: 1,
				form: {
					page: 1,
					size: 30,
					username: undefined,
					name: undefined
				},
				addform: {
					rolename: undefined, //
					jurisdiction_ids: []
				},
				// 富文本编辑器工具栏
				editorOption: {
					modules: {
						ImageExtend: {
							loading: true,
							name: "image",
							size: 10000,
							action: proUrl + '/backstage/api/upload_image/',
							response: res => {
								console.log(res)
								return res.url;
							},
							headers: (xhr, formData) => {
								//xhr.setRequestHeader(
								//  "X-Nideshop-Token",
								//  localStorage.getItem("token")
								//);
							}, // 可选参数 设置请求头部
							sizeError: () => {
								// return this.$message.error("图片超过20");
							} // 图片超过大小的回调
						},
						toolbar: {
							container: [
								["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
								["blockquote", "code-block"], //引用，代码块
								[{
									header: 1
								}, {
									header: 2
								}], // 几级标题
								[{
									list: "ordered"
								}, {
									list: "bullet"
								}], // 有序列表，无序列表
								[{
									script: "sub"
								}, {
									script: "super"
								}], // 下角标，上角标
								[{
									indent: "-1"
								}, {
									indent: "+1"
								}], // 缩进
								[{
									direction: "rtl"
								}], // 文字输入方向
								[{
									size: ["small", false, "large", "huge"]
								}], // 字体大小
								[{
									header: [1, 2, 3, 4, 5, 6, false]
								}], // 标题
								[{
									color: []
								}, {
									background: []
								}], // 颜色选择
								[{
									font: []
								}], // 字体
								[{
									align: []
								}], // 居中
								["link", "image", "video"],
								["clean"]
							],
							handlers: {

								image: function() {
									QuillWatch.emit(this.quill.id);
								},
								video: function(value) {
									// 上传视频
									if (value) {
										self.videoDialog.show = true;
										// document
										//   .querySelector(".avatar-uploader-video input")
										//   .click(); // 触发input框选择文件
									} else {
										this.quill.format("video", false);
									}
								},

							}
						},
					}
				},
				screenOptions: '',
				statistical: '', //统计
				uploadImgUrl: proUrl + '/backstage/api/upload_image/',

				childrow: '',
				childtypeflag: 1, //  1新增 2修改
				currentPage: 1, //初始页
				pagesize: 30, //  每页的数据
				pageTotal: '',

				currentPage_1: 1, //初始页
				pagesize_1: 30, //    每页的数据
				pageTotal_1: '',

				currentPage_2: 1, //初始页
				pagesize_2: 30, //    每页的数据
				pageTotal_2: '',

				dialogVisible: false,
				tableData: '',
				tableData_1: [],
				tableData_2: [],

				formitnanme: '',
				flagtype: 1,
				user_id: '',
				//详情
				dialogVisible_1: false,
				detailDataLog: '',
				detailrow: '',

				//添加记录
				addLogVisible: false,
				logInfo: '',
				value2: '',
				pickerOptions: {
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				templateUser_id: '',

				deleteList_data: ''
			}
		},
		components: {
			quillEditor
		},
		watch: {
			addpriceType(newName, oldName) {
				console.log('==1', newName)
				if (newName == '减') {
					this.addform.surplus = (Number(this.now_mungbean) - Number(this.addform.consume)).toFixed(2)
					console.log('==', this.allPrice)
					if (this.addform.surplus < 0) {
						this.addform.consume = 0
						this.addform.surplus = this.now_mungbean
					}
				} else {
					this.addform.surplus = (Number(this.now_mungbean) + Number(this.addform.consume)).toFixed(2)
				}

			},
			'addform.consume'(newName, oldName) {
				console.log('==2', newName)
				if (this.addpriceType == '减') {
					this.addform.surplus = (Number(this.now_mungbean) - Number(this.addform.consume)).toFixed(2)

					if (this.allPric < 0) {
						this.addform.consume = 0
						this.addform.surplus = this.now_mungbean
					}
				} else {
					this.addform.surplus = (Number(this.now_mungbean) + Number(this.addform.consume)).toFixed(2)
				}
			}
		},
		computed: {
			role() {
				return this.name === 'admin' ? '超级管理员' : '普通用户';
			}
		},
		created() {
			// this.form.user_id=window.localStorage.getItem('user_id')
			this.getList()


		},
		// activated() {
		//     this.handleListener();
		// },
		// deactivated() {
		//     window.removeEventListener('resize', this.renderChart);
		//     bus.$off('collapse', this.handleBus);
		// },
		methods: {

			// 富文本视频上传前
			beforeUploadVideo(file) {
				const fileSize = file.size / 1024 / 1024 < 500;
				if (
					[
						"video/mp4",
						"video/ogg",
						"video/flv",
						"video/avi",
						"video/wmv",
						"video/rmvb",
						"video/mov",
					].indexOf(file.type) == -1
				) {
					this.$message.error("请上传正确的视频格式");
					return false;
				}
				if (!fileSize) {
					this.$message.error("视频大小不能超过500MB");
					return false;
				}
				// 富文本框视频上传限制最小宽高均为480px
				this.isShowUploadVideo = false;
				// const isVideo = file.type === "video/mp4";
				// if (!isVideo) {
				//   this.$message.error("上传视频只能是 mp4 格式!");
				// } else {
				//   // 显示loading动画
				//   this.quillUpdate = true;
				// }
				// return isVideo;
			},

			addVideoLink(videoLink) {
				if (!videoLink) return this.$message.error("请输入视频地址");
				this.videoDialog.show = false;
				const quill = this.$refs.myQuillEditor.quill;
				const length = quill.getSelection(true).index;
				quill.insertEmbed(length, "video", videoLink);
				quill.setSelection(length + 1);
			},
			uploadVideoSuccess(res) {
				console.log('上传返回的数据',res)
				// res为图片服务器返回的数据
				// 获取富文本组件实例
				const quill = this.$refs.myTextEditor.quill;
				// 如果上传成功
				if (res.code == 0 && res.url != null) {
					this.videoDialog.show = false;
					// 获取光标所在位置
					const length = quill.getSelection(true).index;
					// 插入图片  res.info为服务器返回的图片地址
					quill.insertEmbed(length, "video", res.url);
					// 调整光标到最后

					quill.setSelection(length + 1);
				} else {
					this.$message.error("视频插入失败");
				}
				// loading动画消失
				this.quillUpdate = false;
			},
			uploadVideoError() {
				// loading动画消失
				this.quillUpdate = false;
				this.$message.error("视频插入失败");
			},
			inputFun(e) {
				this.$emit("inputFun", e);
			},

			handleCheckChange() {

				let arr = []
				for (var i = 0; i < this.$refs.tree.getCheckedNodes().length; i++) {
					arr.push(this.$refs.tree.getCheckedNodes()[i].id)
				}
				this.addform.jurisdiction_ids = arr.toString()
				console.log(111, this.addform.jurisdiction_ids)
				// return this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
			},

			// 用户改变事件
			userChange(e) {
				console.log('===', e)
				for (var i = 0; i < this.userList_1.length; i++) {
					if (this.userList_1[i].user_id == e) {
						this.userInfo = this.userList_1[i]
						this.now_mungbean = this.userList_1[i].mungbean
					}
				}

			},

			getRowKeys(row) {
				return row.user_id
			},

			handleChange(selection) {
				console.log(selection)
				this.deleteList_data = selection
			},

			//批量删除
			deleteList() {
				let that = this
				let ids = []
				let arr = this.deleteList_data
				for (var i = 0; i < arr.length; i++) {
					ids.push(arr[i].user_id)
				}
				that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let parms = {
						ids: ids.toString()
					}
					batch_delete(parms).then(res => {
						console.log("批量删除", res)
						that.dialogVisible = false
						if (res.code == 0) {
							that.$message({
								message: '批量删除成功！',
								type: 'success'
							});
							that.getList()
						}

						// this.tableData = res.list;
						// this.pageTotal = res.pageTotal || 50;
					});

				}).catch(() => {
					that.$message({
						type: 'info',
						message: '已取消删除'
					});
				});


			},

			//批量导出
			export_excel_userList() {
				let that = this
				let ids = []
				let arr = this.deleteList_data
				for (var i = 0; i < arr.length; i++) {
					ids.push(arr[i].user_id)
				}

				let parms = {
					ids: ids.toString()
				}
				window.location.href = 'https://www.whhdb2022.com/backstage/api/userview/export_excel/?ids=' + ids
					.toString()
				// export_excel_user(parms).then(res => {
				// 	console.log("批量导出", res)
				// 	that.dialogVisible = false
				// 	if (res.code == 0) {
				// 		that.$message({
				// 			message: '批量导出成功！',
				// 			type: 'success'
				// 		});
				// 		that.getList()
				// 	}

				// 	// this.tableData = res.list;
				// 	// this.pageTotal = res.pageTotal || 50;
				// });


			},

			getListCalculationview() {
				let that = this
				let query;
				query = {}
				console.log(query)
				calculationview(query).then(res => {
					console.log("审核", res);
					that.statistical = res
				});
			},
			uploadSectionFile(param) {
				var fileObj = param.file;
				// FormData 对象
				var form = new FormData();
				// 文件对象
				form.append("image", fileObj);
				uploadImg(form).then(res => {
					console.log("上传图片", res)
					this.addform.job_card_img = res.url
					this.$message({
						message: '上传成功！',
						type: 'success'
					});
				});
			},
			handleRemove(file, fileList) {
				this.ruleForm.cardUpImg = "";
				this.imagesUp = [];
				this.hideUp = false;
			},

			uploadSectionFile1(param) {
				var fileObj = param.file;
				// FormData 对象
				var form = new FormData();
				// 文件对象
				form.append("image", fileObj);
				uploadImg(form).then(res => {
					console.log("上传图片", res)
					this.addform.head_img = res.url
					this.$message({
						message: '上传成功！',
						type: 'success'
					});
				});
			},
			handleRemove1(file, fileList) {
				this.ruleForm.cardUpImg = "";
				this.imagesUp = [];
				this.hideUp = false;
			},

			//列表选择导出
			handleSelectionChange(selection) {
				var selectionbox = selection.map(function(car) {
					return car.template_info_id;
				})
				console.log(selectionbox)
				this.selectionbox = selectionbox.toString()
			},
			groupEdict() {
				if (this.selectionbox == '') {
					this.$message.error('请选择模板！');
				} else {
					this.templateVisibledetail_add_1 = true
					this.templatedetailLog = '批量编辑'
					this.templateDetailFlagtype = 3
					this.addform_2 = {
						method: undefined,
						weight_start: undefined,
						weight_end: undefined,
						date_start: undefined,
						date_end: undefined,
						first_weight: undefined,
						continued_weight: undefined,
						template: undefined,
						user: undefined,
					}
				}
			},

			//重置
			restSearch() {
				this.form = {
						page: 1,
						size: 30,
						realname: undefined,
						company: undefined,
						nation: undefined,
						marriage_history: undefined,
						education: undefined,
						constellation: undefined,
						sex: undefined,
						age: undefined,
					},

					this.getList()
			},

			//导出
			exportexelBtn() {
				let query = {}
				exportexel(query).then(res => {
					console.log("导出", res)
				});

			},

			dataSearch() {
				this.formatDate(that.value2)
			},
			//添加记录
			showLogdilog(row, type) {
				this.childtypeflag = type
				this.addLogVisible = true
				if (type == 2) {
					this.childrow = row
					this.addformchild = row
					this.uploadimgurl = row.img
				}

			},

			addLogcancel() {
				this.addLogVisible = false
			},

			//确认添加操作日志
			addLogBtn() {
				let that = this
				let query = this.addformchild
				query.personnel = this.detailrow.personnel_id
				console.log("确认添加操作日志", query)
				console.log(query)
				if (this.childtypeflag == 1) {
					detailAdd(query).then(res => {
						that.addLogVisible = false
						that.$message({
							message: '添加成功！',
							type: 'success'
						});
						that.detailClick(that.detailrow)
					});
				} else {
					detailEdict(query.personnel_logs_id, query).then(res => {
						that.addLogVisible = false
						that.$message({
							message: '修改成功！',
							type: 'success'
						});
						that.detailClick(that.detailrow)
					});
				}

			},


			handleSizeChange: function(size) {
				this.pagesize = size;
				this.form.size = size
				console.log(this.pagesize) //每页下拉显示数据
				this.getList()
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
				console.log(this.currentPage) //点击第几页
				this.form.page = currentPage
				this.getList()
			},
			handleSizeChange_1: function(size) {
				this.pagesize_1 = size;
				this.form1.size = size
				this.templateList(this.templateUser_id)
			},
			handleCurrentChange_1: function(currentPage) {
				this.currentPage_1 = currentPage;
				console.log(this.currentPage_1) //点击第几页
				this.page_1 = currentPage
				this.form1.page = currentPage
				this.templateList(this.templateUser_id)
			},

			handleSizeChange_2: function(size) {
				this.pagesize_2 = size;
				this.form2.size = size
				this.templateDetailClick()
			},
			handleCurrentChange_2: function(currentPage) {
				this.currentPage_2 = currentPage;
				console.log(this.currentPage_2) //点击第几页
				this.page_2 = currentPage
				this.form2.page = currentPage
				this.templateDetailClick()
			},
			showdialogVisible() {
				this.Texttitle = '新增'
				this.addform = {
					realname: undefined,
					company: undefined,
					department: undefined,
					job_card_img: undefined,
					sex: undefined,
				}
				let that = this
				let query = {}
				this.user_id = ''
				this.dialogVisible = true
				this.flagtype = 1
			},


			//s删除
			deleteThis(row) {
				let that = this
				that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let query = {
						"gonggao_id": row.gonggao_id,
					}
					gonggaoDelete(row.gonggao_id, query).then(res => {
						that.dialogVisible = false
						if (res.code == 0) {
							that.$message({
								message: '删除成功！',
								type: 'success'
							});
							that.getList()
						}

						// this.tableData = res.list;
						// this.pageTotal = res.pageTotal || 50;
					});
				}).catch(() => {
					that.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//编辑
			handleClick(row, readOnly) {
				console.log("编辑", row)
				this.readOnly = readOnly
				if (readOnly == true) {
					this.Texttitle = '查看'
				} else {
					this.Texttitle = '编辑'
				}
				this.flagtype = 2
				this.dialogVisible = true
				this.addform = row
				let that = this
				this.user_id = row.gonggao_id
			},


			//关闭新增弹窗
			logCancel_1() {
				this.dialogVisible = false
			},
			logCancel_2() {
				this.templateVisible_add = false
			},
			logCancel_3() {
				this.templateVisibledetail_add_1 = false
			},

			//新增用户
			submitForm_add(item) {
				console.log("新增记录", item)
				jianjiepeizhiEdict(this.tableData.jianjiepeizhi_id, this.tableData).then(res => {
					console.log("修改", res)
					this.dialogVisible = false
					if (res.code == 0) {
						this.$message({
							message: '修改成功！',
							type: 'success'
						});
						this.getList()
					}

					// this.tableData = res.list;
					// this.pageTotal = res.pageTotal || 50;
				});


			},
			getList() {
				let that = this
				let query = that.form
				console.log('参数', that.form)
				console.log(query)
				jianjiepeizhiList(query).then(res => {
					console.log("简介", res.results[0]);
					that.tableData = res.results[0];
					that.pageTotal = res.count
				});
			},

			formatTen(num) {
				return num > 9 ? (num + "") : ("0" + num);
			},
			formatDate(date) {
				console.log("时间", date)
				var date = new Date(date)
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();

				return year + "-" + this.formatTen(month) + "-" + this.formatTen(
					day) + " " + this.formatTen(hour) + ":" + this.formatTen(minute) //+ ":" + this.formatTen(second);
				console.log(333, year + "-" + this.formatTen(month) + "-" + this.formatTen(day))
			},
			changeDate() {
				const now = new Date().getTime();
				this.data.forEach((item, index) => {
					const date = new Date(now - (6 - index) * 86400000);
					item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
				});
			}

		}
	};
</script>


<style lang="scss" scoped>
	.el-tree /deep/ .el-tree-node {
		.is-leaf+.el-checkbox .el-checkbox__inner {
			display: inline-block;
		}

		.el-checkbox__input>.el-checkbox__inner {
			// display:none;
		}

		.is-leaf.el-tree-node_expand-icon {
			// display:none;
		}

		.is-focusable {
			float: left;
			margin-top: 10px;
		}
	}

	/deep/ .el-pagination__sizes {
		display: none !important;
	}

	/deep/ .el-upload--text {
		width: inherit !important;
		height: inherit !important;
	}

	.edict_row_title {
		width: 100%;
		height: 80px;
		line-height: 100px;
		margin: auto;
		font-weight: bold;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.header_bottom {
		/* width: 300px; */
	}

	.header_bottom /deep/ .el-tabs__content {
		display: none;
	}

	.headercon {
		height: 50px;
		/* margin-top: 20px; */
		margin-bottom: 20px;
		border-bottom: 1px solid #369AFF;
	}

	.el-upload {
		width: 100px;
	}

	.el-row {
		margin-bottom: 20px;
	}

	.grid-content {
		display: flex;
		align-items: center;
		height: 40px;
	}

	.grid-cont-right {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #999;
	}

	.grid-num {
		font-size: 30px;
		font-weight: bold;
	}

	.grid-con-icon {
		font-size: 50px;
		width: 100px;
		height: 100px;
		text-align: center;
		line-height: 100px;
		color: #fff;
	}

	.grid-con-1 .grid-con-icon {
		background: rgb(45, 140, 240);
	}

	.grid-con-1 .grid-num {
		color: rgb(45, 140, 240);
	}

	.grid-con-2 .grid-con-icon {
		background: rgb(100, 213, 114);
	}

	.grid-con-2 .grid-num {
		color: rgb(45, 140, 240);
	}

	.grid-con-3 .grid-con-icon {
		background: rgb(242, 94, 67);
	}

	.grid-con-3 .grid-num {
		color: rgb(242, 94, 67);
	}

	.user-info {
		display: flex;
		align-items: center;
		padding-bottom: 20px;
		border-bottom: 2px solid #ccc;
		margin-bottom: 20px;
	}

	.user-avator {
		width: 120px;
		height: 120px;
		border-radius: 50%;
	}

	.user-info-cont {
		padding-left: 50px;
		flex: 1;
		font-size: 14px;
		color: #999;
	}

	.user-info-cont div:first-child {
		font-size: 30px;
		color: #222;
	}

	.user-info-list {
		font-size: 14px;
		color: #999;
		line-height: 25px;
	}

	.user-info-list span {
		margin-left: 70px;
	}

	.mgb20 {
		margin-bottom: 20px;
	}

	.todo-item {
		font-size: 14px;
	}

	.todo-item-del {
		text-decoration: line-through;
		color: #999;
	}

	.schart {
		width: 100%;
		height: 300px;
	}

	.delete {
		color: red;
	}

	.dialog-footer {
		width: 80%;
		text-align: right;
		padding-bottom: 30px;
	}
</style>
